<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科室管理</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome 图标 -->
    <link href="/css/all.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 2rem;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
        }
        .action-buttons button {
            margin-right: 5px;
        }
        .status-badge {
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        .status-active {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
        }
        .status-inactive {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .header-container {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="header-container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h2 class="mb-0"><i class="fas fa-clinic-medical me-2"></i>科室管理</h2>
                <p class="text-muted mb-0">管理医院科室信息</p>
            </div>
            <div>
                <button class="btn btn-primary me-2" onclick="location.href='/admins/addDepartment'">
                    <i class="fas fa-plus me-1"></i>添加科室
                </button>
                <button class="btn btn-outline-secondary" id="refreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>刷新数据
                </button>
            </div>
        </div>
    </div>

    <!-- 科室列表 -->
    <div class="table-container">
        <table class="table table-hover mb-0">
            <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>科室名称</th>
                <th>描述</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="departmentTableBody">
            <tr>
                <td colspan="6" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function () {
        // 获取科室数据并渲染表格
        function loadDepartments() {
            $.get('/admins/getAllDepartment', function (data) {
                const tbody = $('#departmentTableBody');
                tbody.empty();

                if (!data || data.length === 0) {
                    tbody.append('<tr><td colspan="5" class="text-center">暂无科室数据</td></tr>');
                    return;
                }

                data.forEach(dept => {
                    const row = `
                        <tr>
                            <td>${dept.id}</td>
                            <td>${dept.name}</td>
                            <td>${dept.description || ''}</td>
                            <td>
                                <span class="status-badge ${dept.status ? 'status-active' : 'status-inactive'}">
                                    ${dept.status ? '启用' : '禁用'}
                                </span>
                            </td>
                            <td class="action-buttons">
                                <button class="btn btn-sm btn-warning edit-btn" data-id="${dept.id}">
                                    <i class="fas fa-edit me-1"></i>修改
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            }).fail(function () {
                $('#departmentTableBody').append('<tr><td colspan="5" class="text-center text-danger">数据加载失败</td></tr>');
            });
        }

        // 页面加载时获取科室列表
        loadDepartments();

        // 绑定刷新按钮事件
        $('#refreshBtn').click(function() {
            loadDepartments();
        });

        // 关键修复：使用事件委托绑定编辑按钮点击事件
        $(document).on('click', '.edit-btn', function() {
            const id = $(this).data('id');
            // 使用正确的URL路径（包含/admins前缀）
            window.location.href = '/admins/updateDepartment?id=' + id;
        });
    });
</script>

</body>
</html>